<template>
	<view>
		<up-popup :show="show" @close="close" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
			<view class="good-box fc-ac px-50" :style="{'min-height':height+'rpx'}">
				<view class="w-100 good-border"></view>
				<view class="color pt-50 fs-36 t-c">
					{{title}}
				</view>
				<view class="public-img-2 px-10 py-10 mt-80">
					<cut-corner :arrow="2" clipSize="26rpx">
						<image style="width: 290rpx;height: 290rpx;" :src="src" mode=""></image>
					</cut-corner>
				</view>
				<view class="w-75 mt-60">
					{{name}}
				</view>
				<view class="op-70 fs-24 mt-30">
					{{price}}
				</view>
				
				<view @click="close" class="public-btn-3 w-100 t-c py-25 mt-auto mb-50">
					<view class="text-color-b fs-32">
						确认
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			show: {
				default: false,
				type:Boolean
			},
			height:{
				default: 900
			},
			title:{
				default: ''
			},
			name:{
				default: ''
			},
			src:{
				default: ''
			},
			price:{
				default: ''
			},
		},
		data() {
			return {
	
			};
		},
		methods: {
			close(){
				this.$emit('close')
			},
			empty(){
				this.$emit('empty')
			},
			cancel(){
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
	.good-box{
		position: relative;
		height: 150rpx;
		box-sizing: border-box;
		background-color: #fff ;
		z-index: 999;
		background: linear-gradient(to bottom, #17404D 0%, #001524 100%);
	}
	
	@media screen and (min-width:960px){
		.good-box{
			left: 50%;
			width: calc(750rpx);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.good-box{
			left: 0;
			width: calc(100vw);
		}
	}
	
	.good-border{
		position: absolute;
		top: 0;
		left: 0;
		height: 2px;
		background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);
	}
</style>